Jetpack compose Theme

目前手機都支持黑暗模式，所以需要取得目前手機的狀態來達到自己本身APP的主題顏色。

明亮模式

val LightColor = lightColors(primary = Color.White, secondary = Color.Black, primaryVariant = Color.Cyan)

黑暗模式

val DarkColor = darkColors(primary = Color.Black, secondary = Color.White, primaryVariant = Color.Blue)

判斷模式

@Composable
fun DemoTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColor
    } else {
        LightColor
    }

    MaterialTheme(colors = colors, content = content)
}

配合其他語法來創建UI

@Preview(showBackground = true)
@Composable
fun demo() {
    //黑暗模式
    DemoTheme(darkTheme = true) {
        Surface(color = MaterialTheme.colors.primary) {
            GetContent(listOf("Hello", "Hello World"))
        }
    }
}
 
@Composable
fun GetContent(names: List<String>) {
    Column(Modifier.padding(16.dp)) {
        //用for迴圈創建View
        for (name in names) {
            Text(text = name, color = MaterialTheme.colors.secondary)
            Divider(color = MaterialTheme.colors.primaryVariant)
        }
    }
}